<template>
  <div>
    <el-aside id="aside" class="open">
      <div
        style="text-align: center; background-color: #4a5064"
        @click="open()"
      >
        |||
      </div>
      <!-- 侧边栏 -->
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#333744"
        text-color="#fff"
        :collapse="isCollapse"
        router
      >
        <el-submenu
          :index="item.path"
          v-for="(item, index) in menu"
          :key="index"
        >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ item.authName }}</span>
          </template>
          <el-menu-item
            :index="'/admin/' + it.path"
            v-for="(it, i) in item.children"
            :key="i"
          >
            <i class="el-icon-menu"></i>
            <span slot="title">{{ it.authName }}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!-- 开关按钮 -->
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: ["menu"],
  data() {
    return {
      isCollapse: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 判断开关
    open() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse == false) {
        aside.className = "open";
      } else {
        aside.className = "close";
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.open {
  width: 200px !important;
}
.close {
  width: 64px !important;
}
//   设置左侧一边框问题
.el-menu {
  border-right: none;
}
</style>
